<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div style="width: 300px;height: 200px;background-color: #f00;"></div>
    <ul>
        <li>a</li>
        <li>a</li>
        <li>a</li>
        <li>a</li>
    </ul>
</body>

</html>
<script>
    let div = document.getElementsByTagName('div')[0];
    // div.addEventListener('click', function () {
    //     console.log('a');
    // }, false);
    // div.addEventListener('click', function () {
    //     console.log('b');
    // }, false);


    //       div.attachEvent('onclick', function(){
    //         console.log('ie9独有的绑定事件')
    //       })


    let liCol = document.getElementsByTagName('li'),
        len = liCol.length;
    for (let i = 0; i < len; i++) {
        (function (i) {
            liCol[i].addEventListener('click', function () {
                console.log(i)
            }, false);
        }(i))
    }


    function addEvent(elem, type, handle){
    if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    }else if(elem.attachEvent){
        elem.attachEvent('on', + type, function (){
            handle.call(elem);
        })
    }else{
        elem['on' + type] = handle;
    }
}


function test(){
    console.log('a');
}
addEvent(div,'click',test)


// 多个li 事件委托
let ul = document.getElementsByTagName('ul')[0];
ul.onclick = function (e){
    var event = e || window.event;
    var target = event.target || event.srcElement;
    console.log(target.Patent);
}
</script>